<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>十大名画</title>
		<script src="js/jquery-3.6.0.min.js"></script>
		<style>
		</style>
	</head>
	<body>
		<table border="0px" cellspacing="3" cellpadding="3" align="center">
			<tr>
				<th>序号</th>
				<th>名称</th>
				<th>朝代</th>
				<th>介绍</th>
				<th>操作</th>
			</tr>
		</table>
		<center><button type="button" onclick="add()">增加</button></center>
		
		<script type="text/javascript">
			$.ajax({
				type:"get",
				url:"json/content.json",
				async:true,
				dataType:"json",
				success:function(data){
					for(var i=0;i<data.length;i++){
						var tr=$("<tr></tr>");
						var td1=$("<td></td>");
						var td2=$("<td></td>");
						var td3=$("<td></td>");
						var td4=$("<td></td>");
						var td5=$("<td></td>");
						td1.html("<input type='text' value="+data[i].id+" disabled=true class='con'></html>");
						td2.html("<input type='text' value="+data[i].name+" disabled=true class='con'></html>");
						td3.html("<input type='text' value="+data[i].dynasty+" disabled=true class='con'></html>");
						td4.html("<input type='text' value="+data[i].note+" disabled=true class='con'></html>");
						td5.html("<input type='button' value='编辑' onclick='check(this)' class='bj'></input> <input type='button' value='删除'  class='del' onclick='del(this)'></input>");
						tr.append(td1);
						tr.append(td2);
						tr.append(td3);
						tr.append(td4);
						tr.append(td5);
						$("table").append(tr);
					}
				},
				error:function(data){
					$("span").html("请求失败");
				}
			});
			var str1,str2,str3,str4,flag=0;
			function check(m){
				if($(m).val()=="保存"){
					if(confirm("确定保存？")){
						
						var p1=$(m).parent().parent().find(".con").eq(0).val();
						var p2=$(m).parent().parent().find(".con").eq(1).val();
						var p3=$(m).parent().parent().find(".con").eq(2).val();
						var p4=$(m).parent().parent().find(".con").eq(3).val();
						if(p1==''||p2==''||p3==''||p4==''){
							alert("数据信息不完整！！");
							return;
						}
						$(".con").attr("disabled",true);
						$(m).next(".del").val("删除");
						$(m).val("编辑");
						$(".bj").attr("type","button");
						$(".del").attr("type","button");
					}
				}else{
					$(".bj").attr("type","hidden");
					$(".del").attr("type","hidden");
					//切换删除按钮为返回
					$(m).next(".del").attr("type","button").val("取消");
					//切换编辑按钮为保存
					$(m).attr("type","button").val("保存");
					//设置当前行可以编辑
					$(m).parent().parent().find(".con").attr("disabled",false);
					str1=$(m).parent().parent().find(".con").eq(0).val();
					str2=$(m).parent().parent().find(".con").eq(1).val();
					str3=$(m).parent().parent().find(".con").eq(2).val();
					str4=$(m).parent().parent().find(".con").eq(3).val();
					
				}
			}
			function del(p){
				if($(p).val()=="取消"){
					if(confirm("是否取消？")){
						$(".con").attr("disabled",true);
						$(p).next(".del").val("删除");
						$(p).val("编辑");
						$(".bj").attr("type","button");
						$(".del").attr("type","button");
						$(p).val("删除");
						$(p).prev(".bj").val("编辑");
						$(p).parent().parent().find(".con").eq(0).val(str1);
						$(p).parent().parent().find(".con").eq(1).val(str2);
						$(p).parent().parent().find(".con").eq(2).val(str3);
						$(p).parent().parent().find(".con").eq(3).val(str4);
						if(flag==1){
							set(p);
						}
					}
				}else{
					if(confirm("是否删除?")){
					p.parentElement.parentElement.parentElement.removeChild(p.parentElement.parentElement);
					}
				}
			}
			function add(){
				var tr=$("<tr></tr>");
				var td1=$("<td></td>");
				var td2=$("<td></td>");
				var td3=$("<td></td>");
				var td4=$("<td></td>");
				var td5=$("<td></td>");
				td1.html("<input type='text' disabled=false class='con'></html>");
				td2.html("<input type='text' disabled=false class='con'></html>");
				td3.html("<input type='text' disabled=false class='con'></html>");
				td4.html("<input type='text' disabled=false class='con'></html>");
				td5.html("<input type='button' value='编辑' onclick='check(this)' class='bj'></input> <input type='button' value='删除'  class='del' onclick='del(this)'></input>");
				tr.append(td1);
				tr.append(td2);
				tr.append(td3);
				tr.append(td4);
				tr.append(td5);
				$("table").append(tr);
				flag=1;
			    check($(td5).find(".bj"));
			}
			function set(p){
					p.parentElement.parentElement.parentElement.removeChild(p.parentElement.parentElement);
					flag=0;
			}
		</script>
	</body>
</html>
